<script lang="ts" setup>
import { useConfigStore } from '@/stores/config'
import router from '@/router/index'
import { onMounted, ref } from 'vue'
import MonacoEditor from '@/components/monacoEditor.vue'
defineOptions({
  name: 'blockMode'
})
const configStore = useConfigStore()

const handleSwitchChange = () => {
  router.push('/codeMode')
}

const handleRunCode = () => {}

const handleRemoveCode = () => {}

// 控制实时预览代码
const isPreview = ref(true)

const block = ref(null)
const handlePreviewChange = () => {
  block.value?.resizeWorkSpace()
  // blockEditor.value?.resizeWorkSpace()
}
// DONE: 实时预览代码的功能
// 实现编辑器的宽高自适应
const editorContainer = ref(null)
const editor = ref(null)
onMounted(() => {
  const resizeObserver = new ResizeObserver(() => {
    editor.value?.resizeEditor()
  })
  resizeObserver.observe(editorContainer.value)
})
// 实现预览代码
const handleUpdatePreviewCode = (code: string) => {
  // console.log(code)
  editor.value?.setEditorCode(code)
}
</script>

<template>
  <div class="block-mode-container">
    <monaco-header>
      <template #left>
        <form-label>欢迎学习Python!૮(˶ᵔ ᵕ ᵔ˶)ა</form-label>
        <form-label label="模式">
          <el-switch
            v-model="configStore.modeConfig"
            active-text="textCode"
            inactive-text="blockCode"
            inline-prompt
            style="--el-switch-on-color: #874ccc; --el-switch-off-color: #ff8a08; height: 80px"
            size="large"
            @change="handleSwitchChange"
          ></el-switch>
        </form-label>
        <form-label label="实时预览">
          <el-switch
            v-model="isPreview"
            size="large"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            inline-prompt
            active-text="是"
            inactive-text="否"
            @change="handlePreviewChange"
          >
          </el-switch>
        </form-label>
      </template>
      <template #right>
        <el-button color="#874ccc" @click="handleRunCode"
          ><el-icon style="margin-right: 10px"><Pointer /></el-icon>运行</el-button
        >
        <el-button @click="handleRemoveCode" type="danger">
          <el-icon style="margin-right: 10px"><Delete /></el-icon>
          清除
        </el-button>
      </template>
    </monaco-header>
    <section class="block-mode-container__editor">
      <section class="block-mode-container__editor__workspace">
        <block-editor ref="block" @update:code="handleUpdatePreviewCode"></block-editor>
      </section>
      <section
        class="block-mode-container__editor__preview"
        v-show="isPreview"
        ref="editorContainer"
      >
        <MonacoEditor :readOnly="true" ref="editor"></MonacoEditor>
      </section>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.block-mode-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  .block-mode-container__editor {
    flex: 1;
    display: flex;
    .block-mode-container__editor__workspace {
      // flex: 5;
      flex: 1;
      height: 100%;
    }
    .block-mode-container__editor__preview {
      // flex: 5;
      flex: 1;
      height: 100%;
      background-color: purple;
      // width: 300px;
    }
  }
}
</style>
@/stores/useConfigStore